<template>
	<div class="user-invite">
		<div class="com-header border-1px"
			v-if="isLoadDom"
		>
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				邀请分享
			</div>
		</div>
		<div class="ui-content"
			v-if="isLoadDom"
		>
			<h1>分享专属海报，新用户可免邀请码注册，关系自动绑定。<span>长按分享海报给好友</span></h1>
			<div class="sm-banner">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(item, index) in list"
						:key="index"
					>
						<img :src="item" 
							:key="item"
						/>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>		
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				swiperOption: {
					effect: 'coverflow',
					grabCursor: true,
					centeredSlides: true,
					slidesPerView: 'auto',
					initialSlide: 0,
					coverflowEffect: {
						rotate: 50,
						stretch: 0,
						depth: 200,
						modifier: 1,
						slideShadows: false
					},
					pagination: {
						el: '.swiper-pagination'
					}
				},
				list: [],
				isLoadDom: false,
				wx_login: '',
				infoList: [],
				userInfo: [],
				mobile: ''
			}
		},
		beforeMount(){
			axios.post(Http.USERIDEX)
				.then( res => {
					const ret =res.data;
					if(ret.code == 1){
						this.userInfo = ret['data']
						if (!this.userInfo.mobile) {
							this.$router.push("/bind/phone")
						}
					}				
				})
		},
		mounted(){
			var self = this;
			axios.post(Http.INDEXDATA) 
                .then( res => {
                    var ret = res.data            
                    if(ret.code == 1){
	                    self.infoList = ret['data']['appcfg'];
	                    self.wx_login = self.infoList.wx_login
	                    if (self.wx_login == 1) {
							axios.post(Http.INVITEPHOTOS)
							.then( res => {
								var ret = res.data
								if (ret.code == 1) {
									self.list = ret.data.image
									self.isLoadDom = true
								}else{
									Toast("咦，生成海报失败了，请过一会再试试吧，亲~")
								}				
							})
						}else{
							axios.post(Http.INVITEIMGS)
							.then( res => {
								var ret = res.data
								if (ret.code == 1) {
									self.list = ret.data.image
									self.isLoadDom = true
								}else{
									Toast("咦，生成海报失败了，请过一会再试试吧，亲~")
								}				
							})
						}  
	                }
	            }
	        );						
		},
		updated(){
			
		}
	}
</script>
<style lang="scss" scoped>
	.user-invite{
		.ui-content{
			background: #f5f5f5;
			h1{
				font-size: 0.24rem;
				color: #666;
				padding: 0.2rem 0.6rem;
				line-height: 0.4rem;
				span{
					color: #333;
				}
			}
			.sm-banner{
			    width: 100%;
			    height: 10rem;
			    padding-top: 0.4rem;
			    .swiper-slide {
				    background-position: center;
				    background-size: cover;
				    width: 5.6rem;
				    height: 10rem;
				    img{
				    	display: inline-block;
				    	width: 100%;
				    	background: #f5f5f5;
				    }
				}			
			}
		}
	}
</style>